<script setup lang="ts">
import { ref } from "vue";
import { LPolygon } from "@vue-leaflet/vue-leaflet";
import { useMapStore } from "@/store";
import { queryAreaInfoList } from "@/api/pipe";
import { useLocalStore } from "@/views/layer/gismap/store";

const { L } = window;
const areaPolygonList = ref([]);
const mapStore = useMapStore();
const { areaTypeId } = storeToRefs(mapStore);
const localStore = useLocalStore();
const { visibleAreaTypes } = storeToRefs(localStore);
const onClick = (e: any) => {};
const getAllAreas = () =>
  queryAreaInfoList({
    pageSize: 100000,
    pageIndex: 1,
    polygonType: areaTypeId.value,
  }).then(({ data, succeeded }: any) => {
    if (succeeded && Array.isArray(data?.items)) {
      areaPolygonList.value = data.items
        .filter((item: any) => item.jsonGeom)
        .map((item: any) => {
          const { coordinates } = JSON.parse(item.jsonGeom);
          coordinates[0] = coordinates[0].map((item: any) => [
            item[1],
            item[0],
          ]);
          return {
            ...item,
            coordinates,
          };
        });
    }
  });

onMounted(() => getAllAreas());
onUnmounted(() => mapStore.setAreaTypeId(null));
watchEffect(() => {
  if (areaTypeId) {
    getAllAreas();
  }
});
watchEffect(() => {
  areaPolygonList.value.forEach(
    (item) => (item.visible = visibleAreaTypes.value.includes(item.polygonType))
  );
});
</script>

<template v-if="positionRef">
  <LPolygon
    :key="polygonId"
    v-for="{ coordinates, polygonId } in areaPolygonList.filter(
      (item) => item.visible !== false
    )"
    :lat-lngs="coordinates"
    :weight="1"
    :attribution="{ polygonId }"
    color="purple"
    @click="onClick"
  />
</template>

<style scoped lang="scss"></style>
